<template>
  <aside class="rank">
    <h3 class="title">热门榜单</h3>
    <ol class="list">
      <li v-for="(v, i) in top" :key="v.id" class="item" @click="go(v)">
        <span class="idx" :class="{ hot: i < 3 }">{{ i + 1 }}</span>
        <div class="meta">
          <div class="name">{{ v.title }}</div>
          <div class="sub">播放 {{ toWan(v.plays) }} · 弹幕 {{ toWan(v.danmaku) }}</div>
        </div>
      </li>
    </ol>
  </aside>
</template>

<script setup>
import { computed } from 'vue'
import { useRouter } from 'vue-router'

const props = defineProps({ items: { type: Array, default: () => [] }, limit: { type: Number, default: 10 } })
const router = useRouter()

const top = computed(() => {
  return [...props.items]
    .sort((a, b) => (b.plays + b.danmaku * 3) - (a.plays + a.danmaku * 3))
    .slice(0, props.limit)
})

const toWan = computed(() => {
  return (n) => { if (!n && n !== 0) return '-'; return n >= 10000 ? (Math.round(n / 1000) / 10) + '万' : String(n) }
})
function go(v) { router.push({ name: 'watch', params: { id: v.id } }) }
</script>

<style scoped>
.rank { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; box-shadow: var(--shadow-sm); }
.title { margin: 0 0 8px; font-size: 16px; font-weight: 700; }
.list { list-style: none; margin: 0; padding: 0; }
.item { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 10px; cursor: pointer; transition: transform 0.12s ease, box-shadow 0.2s ease, background-color 0.2s ease; }
.item:hover { background: #f9fafb; box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.idx { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: #6b7280; background: #eef2f7; flex: 0 0 22px; }
.idx.hot { color: #fff; background: #00a1d6; }
.meta { flex: 1; min-width: 0; }
.name { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sub { color: var(--muted); font-size: 12px; margin-top: 2px; }
</style>